<template>
  <view>
    <cu-custom bgColor="bg-gradual-orange" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">抽奖记录</block>
    </cu-custom>

    <view class="wrap">
      <!-- 查询系列 -->
      <view class="u-flex u-row-center">
        <u-dropdown :close-on-click-mask="mask" ref="uDropdown" :activeColor="activeColor" :borderBottom="false">
          <u-dropdown-item @change="change" title="是否兑换" v-model="cash" :options="cashs"></u-dropdown-item>
        </u-dropdown>
      </view>

      <!-- 查询记录列表 -->
      <scroll-view scroll-y class="sv" :style="{ height: navHeight + 'px' }" @scrolltolower="reachBottom">
        <view class="page-box">
          <u-swipe-action
            v-for="(item, index) in dataList"
            :key="item.id"
            :index="index"
            :options="options"
            @click="click"
            :disabled="item.disabled"
          >
            <view class="order u-border-bottom">
              <view class="order-item">
                <view class="left title-wrap">
                  <view class="title">抽奖金额: {{ item.amt }}</view>

                  <view class="content">
                    <view v-if="item.cash == 0" class="type">未兑现</view>
                    <view v-else class="type-gery">已兑现</view>
                    <view class="other-type">中奖时间: {{ item.createTime }}</view>
                  </view>
                </view>
              </view>
            </view>
          </u-swipe-action>
          <u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      size: 20,
      dataList: [],
      loadStatus: 'loadmore',
      pH: 0, //窗口高度
      navHeight: 0, //元素的所需高度
      activeColor: '#19be6b',
      mask: true,
      cashs: [
        {
          label: '全部',
          value: null
        },
        {
          label: '未兑换',
          value: 0
        },
        {
          label: '已兑换',
          value: 1
        }
      ],
      options: [
        {
          text: '兑换',
          style: {
            backgroundColor: '#f37b1d'
          }
        }
      ],
      cash: null
    }
  },
  onShow() {
    // 初始化列表和页数
    this.dataList = []
    this.current = 1
    this.getOrderList(this.current)
  },
  onReady() {
    // 动态获取剩余的高度
    var that = this
    uni.getSystemInfo({
      success: function (res) {
        that._data.pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
        let titleH = uni.createSelectorQuery().select('.sv') //想要获取高度的元素名（class/id）
        titleH
          .boundingClientRect((data) => {
            let pH = that._data.pH
            that._data.navHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
          })
          .exec()
      }
    })
  },
  methods: {
    // 页面数据
    async getOrderList(current) {
      let params = {
        cash: this.cash,
        currentPage: current,
        size: this.size
      }

      let res = await this.$u.api.getLuckdrawPageData(params)
      res.data.forEach((item) => {
        // 是否兑现: 0-未兑现 1-已兑现
        if (item.cash == 0) {
          item.disabled = false
        } else {
          item.disabled = true
        }
      })
      let data = JSON.parse(JSON.stringify(res.data))

      // 无数据 nomore 页数减回来
      if (data.length == 0) {
        this.loadStatus = 'nomore'
        this.current = --this.current
        return
      }

      if (this.dataList.length == 0) {
        // 赋值
        this.dataList = res.data
      } else {
        // 下拉追加
        data.forEach((item) => {
          this.dataList.push(item)
        })
      }
      this.loadStatus = 'loadmore'
    },
    reachBottom() {
      // 加这个判断 为了防止重复下拉
      if (this.loadStatus != 'loading') {
        // 下拉增加页数
        this.current = ++this.current

        this.loadStatus = 'loading'
        setTimeout(() => {
          this.getOrderList(this.current)
        }, 1200)
      }
    },
    closeDropdown() {
      this.$refs.uDropdown.close()
    },
    change() {
      // 列表重新查询
      this.dataList = []
      this.current = 1
      this.getOrderList(this.current)
    },
    /**
     * 兑换
     * @param {Object} index1 按钮下标
     * @param {Object} index 数组下表
     */
    async click(index, index1) {
      // 获取兑换码
      let code = await this.$u.api.getLuckdrawCode(this.dataList[index].id)

      // 进行兑换
      let params = {
        code: code
      }
      await this.$u.api.cash(params)

      this.$u.toast('兑换成功')

      // 重新刷新页面
      setTimeout(() => {
        this.change()
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  margin: 20rpx 40rpx;
  font-size: 25rpx;

  .color-blue {
    color: $u-type-primary;
    margin-right: auto;
    justify-content: flex-start;
  }

  .color-green {
    color: $u-type-success;
    justify-content: center;
  }

  .color-red {
    color: $u-type-error;
    margin-left: auto;
    justify-content: flex-end;
  }
}

.order {
  width: 710rpx;
  background-color: #ffffff;
  margin: 0 20rpx 0 20rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 28rpx;
  display: flex;

  .order-item {
    display: flex;
    justify-content: space-between;

    .left {
      .title {
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        font-size: 35rpx;
        line-height: 45rpx;
      }
    }

    .content {
      .type {
        margin: 6rpx 0;
        font-size: 30rpx;
        color: $u-type-primary;
      }

      .type-gery {
        margin: 6rpx 0;
        font-size: 30rpx;
        color: #8799a3;
      }

      .other-type {
        margin: 6rpx 0;
        font-size: 24rpx;
        color: $u-tips-color;
      }
    }
  }
}

.search-left {
  margin: 0 auto;

  .search-width {
    width: 550rpx;
  }
}

.swipe-right-item-orange {
  margin: 25rpx auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 180rpx;

  width: 150rpx;
  background-color: #f37b1d;
  color: #ffffff;
  padding: 20rpx;
  font-size: 35rpx;
}

.swipe-right-item-grey {
  margin: 25rpx auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 180rpx;

  width: 150rpx;
  background-color: #8799a3;
  color: #ffffff;
  padding: 20rpx;
  font-size: 35rpx;
}
</style>
